// 添加问题
<template>
    <div @touchmove.prevent>
        <van-popup
            v-model="visible"
            position="bottom"
            class="popup-bg"
            get-container="body"
            :style="{ height: '100%', background: '#F4F6F9' }"
            :lock-scroll="false"
        >
            <f7-page>
                <f7-navbar>
                    <f7-nav-left>
                        <f7-link
                            @click="fnColse"
                            icon-material="chevron_left"
                            force
                        ></f7-link>
                    </f7-nav-left>
                    <f7-nav-title>问题库</f7-nav-title>
                    <f7-nav-right> </f7-nav-right>
                </f7-navbar>
                <div class="radio-list">
                    <van-checkbox-group v-model="result">
                        <ul class="treeMenu">
                            <li
                                v-for="(item, index) in data"
                                :key="item[props.key]"
                            >
                                <div class="tree-item">
                                    <div class="tree-item-left">
                                        <i
                                            v-show="item[props.children]"
                                            :class="[
                                                'triangle',
                                                carets[tapScopes[index]],
                                            ]"
                                            @click="changeStatus(index)"
                                        />
                                        <p
                                            :class="[
                                                'treeNode',
                                                {
                                                    'treeNode--select':
                                                        item.onSelect,
                                                },
                                            ]"
                                        >
                                            <span
                                                class="title"
                                                @click="changeStatus(index)"
                                            >
                                                {{ item[props.label] }}
                                            </span>
                                            <van-checkbox
                                                :name="item[props.key]"
                                                shape="square"
                                                :ref="`checkboxes${
                                                    item[props.key]
                                                }`"
                                                @click="check(item)"
                                            ></van-checkbox>
                                        </p>
                                    </div>
                                </div>
                                <v-popup-projectItem
                                    ref="projectItem"
                                    v-show="scopes[index]"
                                    :firstIndex="String(index + 1)"
                                    :data="item[props.children]"
                                    :result="result"
                                    @check="check"
                                    v-bind="$props"
                                    v-on="$listeners"
                                ></v-popup-projectItem>
                            </li>
                        </ul>
                    </van-checkbox-group>
                </div>
                <f7-toolbar position="bottom" no-shadow class="fff">
                    <f7-button fill class="submit-btn" @click="fnSave()"
                        >确定</f7-button
                    >
                </f7-toolbar>
            </f7-page>
        </van-popup>
    </div>
</template>

<script>
const CARETS = { open: 'caret-down', close: 'caret-right' }
import vPopupProjectItem from './v-popup-projectItem.vue'
import Config from '@/libs/config.js'
export default {
    name: 'v-popup-problem',
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        // 操作后自动关闭组件
        autoClose: {
            type: Boolean,
            default: true,
        },
        data: { type: Array, default: () => [] },
        props: {
            type: Object,
            default: () => {
                return { children: 'children', label: 'name', key: 'itemId' }
            },
        },
    },
    components: {
        vPopupProjectItem,
    },
    computed: {
        visible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    data() {
        return {
            result: [],
            carets: CARETS,
            tapScopes: {},
            scopes: {},
            projectItem: '',
            resultName: [],
        }
    },
    created() {},
    mounted() {},
    methods: {
        // 关闭组件
        fnColse() {
            this.visible = false
        },
        // 提交
        fnSave() {
            this.autoClose && this.fnColse()
            this.$emit('save', this.resultName, this.result)
        },
        changeStatus(index) {
            // 图标变化
            this.$set(
                this.tapScopes,
                index,
                this.tapScopes[index]
                    ? this.tapScopes[index] === 'open'
                        ? 'close'
                        : 'open'
                    : 'open'
            )
            // 展开闭合
            this.$set(this.scopes, index, this.scopes[index] ? false : true)
        },
        check(item) {
            let isTrue = this.result.indexOf(item.itemId) == -1 ? false : true
            if (isTrue) {
                if (item.children) {
                    this.addChild(item.children)
                    let isHave = this.resultName.some(
                        (element) => element.name === item.name
                    )
                    if (!isHave) {
                        this.resultName.push(item)
                    }
                } else {
                    let isHave = this.resultName.some(
                        (element) => element.name === item.name
                    )
                    if (!isHave) {
                        this.resultName.push(item)
                    }
                }
                //如果此选项勾选后，要判断所有的上级元素是不是应该全部打勾
                this.selectFather(this.data, item)
            } else {
                //如果此选项清空勾选后，如果下面有userList的话，那么也同时要清空
                if (item.children) {
                    this.clearChild(item.children)
                }
                this.resultName.forEach((element, index) => {
                    if (element.name == item.name) {
                        this.resultName.splice(index, 1)
                    }
                })
                //如果此选项清空勾选后，要把所有的父元素，也全部清空勾选，因为它不勾选了，所有父元素的状态不可能还处于勾选状态，不管它勾选不勾选，我们都要清除一遍，以防万一
                this.clearFather(this.data, item)
            }
        },
        //定义函数清空所有孩子的勾选
        clearChild(arr) {
            for (var i = 0; i < arr.length; i++) {
                let index = this.result.indexOf(arr[i].itemId)
                if (index > -1) {
                    this.result.splice(index, 1)
                    this.resultName.splice(index, 1)
                }
                if (arr[i].children && arr[i].children) {
                    this.clearChild(arr[i].children)
                }
            }
        },
        //定义函数添加所有孩子的勾选
        addChild(arr) {
            for (var i = 0; i < arr.length; i++) {
                let index = this.result.indexOf(arr[i].itemId)
                if (index == -1) {
                    this.result.push(arr[i].itemId)
                    this.resultName.push(arr[i])
                }
                if (arr[i].children) {
                    this.addChild(arr[i].children)
                }
            }
        },
        //定义函数一层一层的往上寻找父元素的userList
        clearFather(father, data) {
            if (father) {
                for (var i = 0; i < father.length; i++) {
                    if (father[i].itemId == data.itemId) {
                        //找到data所在的userList为father，然后再通过这个userList找到拥有这个userList的父元素
                        this.clearRealFather(this.data, father)
                        // let index = this.result.indexOf(data.itemId)
                        // if (index > -1) {
                        //     this.result.splice(index, 1)
                        // }
                    } else if (father[i].children) {
                        this.clearFather(father[i].children, data)
                    }
                }
            }
        },
        //定义函数根据找到的上层父元素的userList来寻找父元素，并将他们清除勾选
        clearRealFather(menus, arr) {
            for (var i = 0; i < menus.length; i++) {
                if (menus[i].children == arr) {
                    //找到这个拥有userList的父元素后，将此selectArr清空
                    let index = this.result.indexOf(menus[i].itemId)
                    if (index > -1) {
                        this.result.splice(index, 1)
                        this.resultName.splice(index, 1)
                    }
                    //找到这个拥有userList的父元素后，再调用clearFather，再进行向上寻找父元素，知道没有父元素为止
                    this.clearFather(this.menus, menus[i])
                } else if (menus[i].children) {
                    this.clearRealFather(menus[i].children, arr)
                }
            }
        },
        //定义函数一层一层的往上寻找父元素的userList
        selectFather(father, data) {
            for (var i = 0; i < father.length; i++) {
                if (father[i].itemId == data.itemId) {
                    var arr = []
                    for (var j = 0; j < father.length; j++) {
                        if (this.result.indexOf(father[j].itemId) > -1) {
                            arr.push(father[i].itemId)
                        }
                    }
                    //判断此数组中是不是所有的selectArr都有值，如果有值，就执行selectRealFather，将上层父元素也勾选
                    if (arr.length == father.length) {
                        this.selectRealFather(this.data, father)
                    }
                } else if (father[i].children) {
                    this.selectFather(father[i].children, data)
                }
            }
        },
        //定义函数根据找到的上层父元素的userList来寻找父元素，并将他们清除勾选
        selectRealFather(menus, arr) {
            for (var i = 0; i < menus.length; i++) {
                if (menus[i].children == arr) {
                    //找到这个拥有userList的父元素后，给selectArr赋值，使其勾选
                    let index = this.result.indexOf(menus[i].itemId)
                    if (index == -1) {
                        this.result.push(menus[i].itemId)
                        this.resultName.push(menus[i])
                    }
                    //找到这个拥有userList的父元素后，再调用clearFather，再进行向上寻找父元素，知道没有父元素为止
                    this.clearFather(this.menus, menus[i])
                } else if (menus[i].children) {
                    this.selectRealFather(menus[i].children, arr)
                }
            }
        },
    },
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
@{deep} .van-checkbox {
    min-width: 20px;
    margin-left: 5px;
}
@{deep}.page-content{
    background:#fff;
}
@{deep}.submit-btn{
    border-radius:24px;
}
.popup-bg {
    width: 100%;
    .popup {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 100;
        width: 100%;
        height: 400px;
        overflow: auto;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        background: #fff;
    }

    .item {
        padding: 0 15px;
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #f7f8f9;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .selected {
        width: 16px;
        height: 16px;
        background-size: 16px auto;
    }

    .radio-list {
        height: calc(100% - 80px);
        overflow-y: auto;
    }
}

.treeMenu {
    padding-left: 20px;
    list-style: none;
    position: relative;
    user-select: none;
    color: #333;
}

.tree-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .tree-item-left {
        flex: 1;
    }

    .tree-item-right {
        width: 124px;
    }

    .add {
        font-size: 14px;
        color: #3385ff;
    }

    .delete {
        font-size: 14px;
        color: #f15a5a;
        margin-left: 10px;
    }

    @{deep} .f7-icons {
        font-size: 13px;
        margin-right: 5px;
    }
}

.triangle {
    transition: all 0.1s;
    left: 6px;
    margin: 15px 0 0 0;
    position: absolute;
    cursor: pointer;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-left: 8px solid grey;
}

.caret-down {
    transform: rotate(90deg);
    left: 2px;
    margin: 15px 0 0 0;
}

.checkbox-wrap {
    display: flex;
    align-items: center;
}

.checkbox {
    margin-right: 0.5rem;
}

.treeNode:hover,
.treeNode:hover > .operation {
    color: #3771e5;
    background: #f0f7ff;
}

.treeNode--select {
    background: #f0f7ff;
}

.treeNode:hover > .operation {
    opacity: 1;
}

p {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 10px 0;
}

p > .title {
    cursor: pointer;
    width: 90%;
}

a {
    color: cornflowerblue;
}

.operation {
    position: absolute;
    right: 0;
    font-size: 18px;
    opacity: 0;
}
</style>
